
import 'package:flutter/material.dart';

import 'coordinate.dart';

class PainterBox extends CustomPainter{

  /// 坐标轴绘制
  Coordinate coordinate = Coordinate();

  /// 定义了如何绘制这个矩形，例如颜色和样式等。
  final Paint _bgPainter = Paint()
    ..color = Colors.grey.withOpacity(0.2);
  final Paint _mainPainter = Paint()
    ..color = Colors.blue;

  /// 小球半径
  final double _mainCircleRadius = 5;

  final List<Offset> points = [
    Offset(0.1, 0.3),
    Offset(0.2, 0.5),
    Offset(0.3, 0.4),
    Offset(0.4, 0.8),
    Offset(0.5, 0.3),
    Offset(0.6, 0.2),
    Offset(0.7, 0.9),
  ];

  @override
  void paint(Canvas canvas, Size size) {
    print("画板大小：${size}");

    // Offset.zero & size: 这是定义Rect对象的一种方式。
    // &运算符在此处用来结合偏移（Offset）和尺寸（Size）来创建一个矩形。
    // Offset.zero表示矩形的左上角从坐标原点（0,0）开始。
    // size参数则定义了这个矩形的高度和宽度。
    canvas.drawRect(Offset.zero & size, _bgPainter);

    //*************** 设置Y轴向上 start ***************
    // 将原点移动到这个位置 - 从这开始绘制的图形，都会根据这个新的原点来设置位置（初始是[0, 0]）
    canvas.translate(0, size.height);
    // 绘制坐标轴
    coordinate.paint(canvas, size);
    // canvas.scale(sx, sy)是Canvas类的一个方法，它用来缩放画布。
    // 这个方法接受两个参数，sx和sy，分别表示水平方向和垂直方向的缩放比例。
    // sx参数为1，表示画布在水平方向的原尺寸不变，sy参数为-1，表示画布在垂直方向上进行了翻转。
    canvas.scale(1, -1);
    //*************** 设置Y轴向上 end ***************

    // 匹配刻度画小球 - 通过跟Coordinate中计算step一样的逻辑进行计算坐标所在位置，就能准确算出点位，无论布局大小怎么变化都在对应的点位上
    /// Offset a = const Offset(10.0, 10.0);
    /// Offset b = a * 2.0; // same as: a.scale(2.0, 2.0) >>> coo.scale 相当于coo中的x和参数一相乘 >>> 从而得出对应的坐标，也就是x、y轴的百分比的位置
    Offset coo = const Offset(0.3, 0.6);
    canvas.drawCircle(coo.scale(size.width, size.height), 10, _mainPainter);

    /// 把集合中的点都绘制尽量
    _mainPainter.color = Colors.red;
    _mainPainter.style = PaintingStyle.stroke;
    points.forEach((element) {
      canvas.drawCircle(element.scale(size.width, size.height), _mainCircleRadius, _mainPainter);
    });
    for(int i = 0; i < points.length; i++){
      Offset element = points[i];
      canvas.drawCircle(element.scale(size.width, size.height), _mainCircleRadius, _mainPainter);

      // 简单把点用线连上
      if(i < points.length - 1){
        // 直线
        Offset nextElement = points[i+1].scale(size.width, size.height);
        // canvas.drawLine(element.scale(size.width, size.height), nextElement, _mainPainter);
        // 贝塞尔曲线
        Path path = Path();
        Offset newElement = element.scale(size.width, size.height);
        path.moveTo(newElement.dx, newElement.dy);
        path.quadraticBezierTo(newElement.dx * 1.2, newElement.dy * 0.8, nextElement.dx, nextElement.dy);
        canvas.drawPath(path, _mainPainter);
      }
    }

    // 绘制小球
    // canvas.drawCircle(Offset.zero, _mainCircleRadius, _mainPainter);
    // canvas.drawCircle(Offset(100, 100), _mainCircleRadius, _mainPainter);
    // canvas.drawCircle(Offset(150, 250), _mainCircleRadius, _mainPainter);
    // canvas.drawCircle(Offset(250, 250), _mainCircleRadius, _mainPainter);
    // canvas.drawCircle(Offset(50, 150), _mainCircleRadius, _mainPainter);
  }

  /// 这个重写的方法决定当接收到一个新的CustomPainter后，是否需要重绘。
  /// 在你的代码中，shouldRepaint返回false，表示不需要重绘。
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }

}